<template>
	<view>
		<view class="tab">
			<view class="home_tab_title">
				<view class="title_inner">
					<uni-segmented-control :current="current" :values="items.map((item,i)=> item.title)" @clickItem="onClickItem" style-type="text" active-color="#f92672"></uni-segmented-control>
				</view>
				
			</view>
			<scroll-view class="home_tab_content" scroll-y enable-flex @scrolltolower="handelScrollToLower">
				<view class="content">
				    <view class="cate_item" v-for="(item,i) in vertical" :key="i">
						<go-detail :list="vertical" :index="i">
						<image :src="item.thumb" mode="widthFix"></image>
						</go-detail>
					</view>
				    
				</view>
			</scroll-view>
		</view>
		
		
		        
	</view>
</template>

<script>
	//引入ui
	import {uniBadge} from '@dcloudio/uni-ui'
	import {uniSegmentedControl} from '@dcloudio/uni-ui'
	// 引入组件
   import goDetail from '@/components/goDetail.vue';
	export default {
		data() {
			return {
				items: [
					
					{
					title: '最新',
					order: 'new'
				    },
					{
					title: '热门',
					order: 'hot'
				    },
				],
				current: 0,
				params: {
					limit: 30,
					skip:0,
					order: 'new'
				},
				id: 0,
				vertical: [],
				hasMore: true
				
			}
		},
		components: {
			uniSegmentedControl,
			goDetail

		},
		methods: {
			onClickItem(e) {
				        
			            if (this.current !== e.currentIndex) {
			                this.current = e.currentIndex;
							console.log(e)
							uni.setNavigationBarTitle({
								title: this.items[this.current].title
							})
							
			            }else {
							return
						}
						this.params.order = this.items[e.currentIndex].order
						this.params.skip = 0;
						this.vertical = [],
						this.getDateList()
			        },
		    async getDateList(){
				const res = await this.request({
					url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
					data: this.params
				})
				console.log(res.data.res)
				if(res.data.res.vertical.length === 0){
					this.hasMore = false
					uni.showToast({
						title: '没有更多数据了',
						icon: "none"
					})
					return
				}
				this.vertical = [...this.vertical,...res.data.res.vertical]
			},
			//滚动 触底加载哏多
			handelScrollToLower(){
				if(this.hasMore){
					this.params.skip += this.params.limit
					this.getDateList()
				}else {
					uni.showToast({
						title: '没有更多数据了',
						icon: "none"
					})
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDateList()
			
		}
	}
</script>

<style lang="scss" scoped>
.tab {
	.home_tab_title {
		position: relative;
			
		.title_inner {
			width: 30%;
			margin: 0 auto;
		}
		.search {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 5%;
		}
		
	}
}
.home_tab_content{
	height: calc(100vh - 36px);
	padding: 10rpx;
}
.content {
	display: flex;
	flex-wrap: wrap;
	
	.cate_item {
		width: 32.7%;
		border: 2rpx solid #FFFDEF;
	}
}
</style>
